<template>
  <div class="vehicle-records">
    <div class="page-container">
      <div class="page-header">
        <h2>运输车记录</h2>
        <div class="header-actions">
          <el-button @click="refreshList">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
      
      <!-- 筛选条件 -->
      <el-card class="filter-card">
        <el-form :model="searchForm" inline>
          <el-form-item label="车牌号">
            <el-input
              v-model="searchForm.licensePlate"
              placeholder="请输入车牌号"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="人员姓名">
            <el-input
              v-model="searchForm.personName"
              placeholder="请输入人员姓名"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="运输时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!-- 运输车记录列表 -->
      <el-card>
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          border
        >
          <el-table-column prop="id" label="记录ID" width="100" />
          <el-table-column prop="licensePlate" label="车牌号" width="120">
            <template #default="{ row }">
              <el-tag type="primary">{{ row.licensePlate }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="personName" label="人员姓名" width="120" />
          <el-table-column prop="transportTime" label="运输时间" width="160" />
          <el-table-column prop="recordTime" label="记录时间" width="160" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">
                {{ getStatusLabel(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="位置" width="200" />
          <el-table-column prop="remarks" label="备注" min-width="200" />
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.page"
            v-model:page-size="pagination.size"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface VehicleRecord {
  id: number
  licensePlate: string
  personName: string
  transportTime: string
  recordTime: string
  status: string
  location: string
  remarks: string
}

const loading = ref(false)
const tableData = ref<VehicleRecord[]>([])

const searchForm = reactive({
  licensePlate: '',
  personName: '',
  dateRange: []
})

const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

// 模拟数据
const mockData: VehicleRecord[] = [
  {
    id: 1,
    licensePlate: '京A12345',
    personName: '张三',
    transportTime: '2025-01-15 08:30',
    recordTime: '2025-01-15 08:35',
    status: 'in',
    location: '厂区大门入口',
    remarks: '正常进入，载有设备材料'
  },
  {
    id: 2,
    licensePlate: '京B67890',
    personName: '李四',
    transportTime: '2025-01-15 09:15',
    recordTime: '2025-01-15 09:20',
    status: 'out',
    location: '厂区大门出口',
    remarks: '正常离开，空车'
  },
  {
    id: 3,
    licensePlate: '京C11111',
    personName: '王五',
    transportTime: '2025-01-15 10:00',
    recordTime: '2025-01-15 10:05',
    status: 'in',
    location: '厂区大门入口',
    remarks: '正常进入，载有施工工具'
  },
  {
    id: 4,
    licensePlate: '京D22222',
    personName: '赵六',
    transportTime: '2025-01-15 11:30',
    recordTime: '2025-01-15 11:35',
    status: 'in',
    location: '厂区大门入口',
    remarks: '正常进入，载有建筑材料'
  },
  {
    id: 5,
    licensePlate: '京A12345',
    personName: '张三',
    transportTime: '2025-01-15 14:20',
    recordTime: '2025-01-15 14:25',
    status: 'out',
    location: '厂区大门出口',
    remarks: '正常离开，载有废料'
  },
  {
    id: 6,
    licensePlate: '京E33333',
    personName: '孙七',
    transportTime: '2025-01-15 15:45',
    recordTime: '2025-01-15 15:50',
    status: 'in',
    location: '厂区大门入口',
    remarks: '正常进入，载有安全设备'
  },
  {
    id: 7,
    licensePlate: '京B67890',
    personName: '李四',
    transportTime: '2025-01-15 16:30',
    recordTime: '2025-01-15 16:35',
    status: 'in',
    location: '厂区大门入口',
    remarks: '正常进入，载有办公用品'
  },
  {
    id: 8,
    licensePlate: '京C11111',
    personName: '王五',
    transportTime: '2025-01-15 17:15',
    recordTime: '2025-01-15 17:20',
    status: 'out',
    location: '厂区大门出口',
    remarks: '正常离开，空车'
  }
]

// 获取运输车记录列表
const fetchVehicleRecords = async () => {
  try {
    loading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    let filteredData = mockData
    
    // 根据筛选条件过滤
    if (searchForm.licensePlate) {
      filteredData = filteredData.filter(item => 
        item.licensePlate.toLowerCase().includes(searchForm.licensePlate.toLowerCase())
      )
    }
    
    if (searchForm.personName) {
      filteredData = filteredData.filter(item => 
        item.personName.includes(searchForm.personName)
      )
    }
    
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      const [startDate, endDate] = searchForm.dateRange
      filteredData = filteredData.filter(item => {
        const recordDate = item.recordTime.split(' ')[0]
        return recordDate >= startDate && recordDate <= endDate
      })
    }
    
    // 分页
    const start = (pagination.page - 1) * pagination.size
    const end = start + pagination.size
    
    tableData.value = filteredData.slice(start, end)
    pagination.total = filteredData.length
  } catch (error: any) {
    ElMessage.error(error.message || '获取运输车记录失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.page = 1
  fetchVehicleRecords()
}

// 重置
const handleReset = () => {
  searchForm.licensePlate = ''
  searchForm.personName = ''
  searchForm.dateRange = []
  pagination.page = 1
  fetchVehicleRecords()
}

// 刷新列表
const refreshList = () => {
  fetchVehicleRecords()
  ElMessage.success('刷新成功')
}

// 分页大小变化
const handleSizeChange = (size: number) => {
  pagination.size = size
  pagination.page = 1
  fetchVehicleRecords()
}

// 当前页变化
const handleCurrentChange = (page: number) => {
  pagination.page = page
  fetchVehicleRecords()
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    in: 'success',
    out: 'warning'
  }
  return typeMap[status] || 'info'
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const labelMap: Record<string, string> = {
    in: '进入',
    out: '离开'
  }
  return labelMap[status] || status
}

onMounted(() => {
  fetchVehicleRecords()
})
</script>

<style lang="scss" scoped>
.vehicle-records {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      color: #333;
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .filter-card {
    margin-bottom: 20px;
  }
  
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
